<template>
  <view class="orderCenter">
    <u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
      <view class="title">评价</view>

      <view class="left-box" @tap="onClickLeft">
        <u-icon name="arrow-left" size="40" color="#000"></u-icon>
      </view>
    </u-navbar>





    <view class="prolistview">
      <view class="prolistviewitem">
        <image :src="orderData.image" class="prolistimg"></image>
        <view class="prolistname">
          {{orderData.name}}
        </view>
        <view class="prolistsku">
          {{orderData.specifications}}
        </view>
      </view>

      <view class="textview">
        <u-input style="background: rgb(242, 242, 242);text-align: left; border-radius: 10rpx;padding: 5rpx;"
          v-model="content" type="textarea" maxlength="10000" placeholder="可以从不同角度给宝贝更全面的评论哦~" />
      </view>

      <view style="font-weight: bold;margin-top: 40rpx;">
        上传图片(选填)
      </view>


      <view class="uploadingview">
        <view class="imageimg" v-for="(item , index) in images" :key="index">
          <image :src="item" style="width: 218rpx;height: 218rpx;"></image>
          <view class="deldiv" @click="delimages(index)">

          </view>
        </view>
        <view class="imageimg" @click="choosepic" v-if="images.length < 9">
          <image src="../../static/businessImg/add.png" mode="" style="width: 218rpx;height: 218rpx;"></image>
        </view>
      </view>

      <view class="btn" @click="handleSubmit">
        提交
      </view>
    </view>
  </view>
  </view>
</template>

<script>
import { orderDetails } from "@/api/user.js";

import { userComment } from "@/api/order.js";

import storage from "@/utils/storage.js";

export default {
  data() {
    return {
      sn: "",
      orderData: {},
      navObj: {
        backgroundColor: "#ffffff",
      },
      content: "",
      images: [],
    };
  },
  onLoad(options) {
    this.sn = options.sn;
    this.loadData();
  },

  methods: {
    onClickLeft() {
      uni.navigateTo({
        url: "/pages/order/evaluate/myEvaluate",
      });
    },
    loadData() {
      orderDetails({
        id: this.sn,
      }).then((res) => {
        this.orderData = res.data;
      });
    },

    choosepic() {
      const num = 9 - this.images.length;
      const that = this;
      uni.chooseImage({
        count: num,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths;
          // that.images = filePath

          filePath.forEach((i) => {
            uni.uploadFile({
              url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
              filePath: i,
              name: "file", // 必须填写，后台用来接收文件

              success: function (uploadFileRes) {
                console.log(uploadFileRes.data);
                that.images.push(JSON.parse(uploadFileRes.data).data);
              },
              fail: function (uploadFileErr) {
                console.log(uploadFileErr); // 上传失败后的操作
              },
            });
          });
        },
      });
    },

    delimages(index) {
      let arr = this.images;
      arr.splice(index, 1);
      this.images = arr;
    },

    handleSubmit() {
      uni.showLoading({
        title: "加载中",
      });
      let img = "";
      if (this.images != []) {
        img = this.images.join(",");
      } else {
        img = "";
      }

      userComment({
        userId: storage.getUserInfo().id,
        type: 2,
        objectId: this.sn,
        imageList: img,
        content: this.content,
      })
        .then((res) => {
          uni.hideLoading();
          uni.showToast({
            icon: "success",
            title: "评论成功",
          });
          uni.navigateTo({
            url: "/pages/business/pinglunlist",
          });
        })
        .catch((_) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style scoped>
.orderCenter {
  width: 100%;
  min-height: 100vh;
}

.title {
  position: absolute;
  top: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  font-family: PingFang;
  font-weight: bold;
  font-size: 33rpx;
  color: #000;
}

.left-box {
  padding-left: 41rpx;
}

.orderbg {
  width: 100%;
  height: 436rpx;
  background: url("../../static/img/orderbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.prolistview {
  width: 708rpx;
  margin: 15px auto;
  background: #ffffff;
  padding: 27rpx 20rpx;
}

.prolistviewitem {
  width: 100%;
  height: 104rpx;
  margin-bottom: 28rpx;
  position: relative;
}

.prolistimg {
  width: 104rpx;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.prolistname {
  width: 500rpx;
  height: 27rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 27rpx;
  color: #151f38;
  line-height: 27rpx;
  position: absolute;
  top: 5rpx;
  left: 139rpx;
}

.prolistsku {
  font-family: PingFang;
  font-weight: 500;
  font-size: 23rpx;
  color: #878c9a;
  height: 23rpx;
  line-height: 23rpx;
  position: absolute;
  bottom: 8rpx;
  left: 141rpx;
}

.uploadingview {
  margin-top: 20rpx;
  width: 100%;
  /* background: red; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.imageimg {
  position: relative;
  width: 218rpx;
  height: 218rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  /* margin-right: 10rpx; */

  image {
    width: 100%;
    height: 100%;
  }
}

.deldiv {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.btn {
  width: 709rpx;
  height: 91rpx;
  border-radius: 50rpx;
  line-height: 91rpx;
  text-align: center;
  font-family: PingFang;
  font-weight: bold;
  font-size: 29rpx;
  color: #ffffff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(146, 207, 56);
}
</style>
